<template>
  <div class="scene">
    <div class="block">
      <span v-show="show1" class="span1 word">你突然清醒过来<br/>“我为什么要贷款呢?”</span>
      <span v-show="show1" class="span2 word">你立马上网搜索<br/>关于注销校园贷的信息<br/>才发现这是个诈骗套路<br/>已经有很多人受骗了</span>
      <span v-show="show1" class="span3 word">QQ的信息响起<br/>“先生您申请贷款了吗?<br/>我这边还没有收到你的申请哦”</span>
      <span v-show="show1" class="span4 word">你感谢自己突然醒悟<br/>转头便拿起手机去报警</span>
      <span v-show="show1" class="span5 word">恭喜您！<br/>通过了本次情景模拟游戏<br/>可重复游玩体验不同结局</span>
      <el-button v-show="show2" class="button" v-on:click="A">结束语</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      show1: true,
      show2: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      setTimeout(() => {this.show1 = false}, 15000)
      setTimeout(() => {this.show2 = true}, 15000)
    },
    A() {
      this.$router.push("/learn/scene1-9")
    },
  }
}
</script>

<style scoped>
.scene{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 1080px;
  height: 607.5px;
  top: 30px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: black;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.button {
  height: 60px;
  margin-top: 270px;
  margin-left: 50px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(249, 191, 75, 1);
  background: rgba(53, 78, 102, 1);
}

.word {
  font-size: 50px;
  font-weight: bold;
  color: rgba(249, 191, 75, 0);
  position: absolute;
  width: 1080px;
  left: 50%;
  transform: translate(-50%, 0%);
  animation-duration: 3s;
  animation-name: move1;
}

.span1{
  top: 210px;
}

.span2{
  top: 150px;
  animation-delay: 3s;
}

.span3{
  top: 180px;
  animation-delay: 6s;
}

.span4{
  top: 210px;
  animation-delay: 9s;
}

.span5{
  top: 180px;
  animation-delay: 12s;
}

@keyframes move1 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}
</style>